<template>
  <div class="course-content">
    <!-- 引入内容区顶部轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in adsList" :key="item.id">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>
    <course-content-list :callback="loadCourse"></course-content-list>
  </div>
</template>

<script>
import { getAllAds, getQueryCourses } from '@/service/course'
import CourseContentList from '@/components/course-content-list.vue'
import { Swipe, SwipeItem } from 'vant'
export default {
  components: { CourseContentList, VanSwipe: Swipe, VanSwipeItem: SwipeItem },
  name: 'CourseContent',
  data () {
    return {
      // 轮播图列表
      adsList: []
    }
  },
  created () {
    // 加载轮播图列表
    this.loadAds()
  },
  methods: {
    loadCourse (option) {
      return getQueryCourses(option)
    },
    async loadAds () {
      // 999 代表课程顶部轮播区域广告图
      const { data } = await getAllAds({
        spaceKeys: '999'
      })
      // console.log(data)
      this.adsList = data.content[0].adDTOList.filter(m => m.status === 1)
      console.log(this.adsList)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-swipe {
  width: 100%;
  // height: 150px;
  .van-swipe-item {
    display: flex;
    width: 100%;
    justify-content: center;
    overflow: hidden;
    img {
      height: 170px;
    }
  }
}
.course-content-list {
  top: 220px;
  bottom: 50px;
}
</style>
